<template>
  <div class="card-container">
    <a-tabs
      v-model:activeKey="activeKey"
      @change="handleTabClick"
      type="card"
      style="padding-top: 3px; margin-left: -1px"
    >
      <a-tab-pane key="0" :tab="tabContractName"> </a-tab-pane>
      <a-tab-pane key="1" :tab="tabDraftContractName"> </a-tab-pane>
    </a-tabs>

    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="12">
          <a-col :md="5" :sm="8">
            <a-form-item :maxLength="50">
              <a-input
                placeholder="合同名称/合同编号/供应商"
                v-model="queryParam.keywords"
              ></a-input>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="8">
            <a-form-item label="合同类型" :maxLength="50">
              <a-select
                :size="'default'"
                style="min-width: 100px"
                :showArrow="true"
                v-model="queryParam.contractType"
                placeholder="请选择合同类型"
              >
                <a-select-option
                  v-for="item in this.$sysDictOptions('contractType')"
                  :key="item.k"
                  :value="item.k"
                >
                  {{ item.v }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="8">
            <a-form-item label="采购方式" :maxLength="50">
              <a-select
                :size="'default'"
                style="min-width: 100px"
                :showArrow="true"
                v-model="queryParam.contractProcurementMethodId"
                placeholder="请选择采购方式"
              >
                <a-select-option
                  v-for="item in this.$sysDictOptions(
                    'contractProcurementMethod'
                  )"
                  :key="item.k"
                  :value="item.k"
                >
                  {{ item.v }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>

          <a-col :md="6" :sm="8">
            <span
              style="float: left; overflow: hidden"
              class="table-page-search-submitButtons"
            >
              <a-button
                type="primary"
                @click="$refs.table.refresh(true)"
                icon="search"
                >查询</a-button
              >
              <a-button @click="reset" icon="reload" style="margin-left: 8px"
                >重置</a-button
              >
              <a @click="handleToggleSearch" style="margin-left: 8px">
                {{ toggleSearchStatus ? '收起' : '展开' }}
                <a-icon :type="toggleSearchStatus ? 'up' : 'down'" />
              </a>
            </span>
          </a-col>
        </a-row>
        <a-row :gutter="12" v-if="toggleSearchStatus">
          <a-col :md="6" :sm="8">
            <a-form-item label="销售人员" :maxLength="50">
              <a-input
                placeholder="请输入销售人员姓名"
                v-model="queryParam.salespersonName"
              ></a-input>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="8">
            <a-form-item label="签约时间" :maxLength="50">
              <a-range-picker
                format="YYYY-MM-DD"
                v-model="queryParam.signingDateList"
                @change="onChange"
              />
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
      <div class="table-operator">
        <a-button
          @click="$refs.modalEdit.addDrawer()"
          type="primary"
          icon="plus"
          v-wx-role="6030601"
          >添加</a-button
        >
        <a-button @click="xttjShow" type="primary" v-wx-role="6030601"
          >协同添加</a-button
        >
        <!-- <a-button
          @click="exportExcel()"
          type="primary"
          style="margin-bottom: 10px"
          icon="download"
          >导出</a-button
        > -->
        <a-dropdown v-if="selectedRowKeys.length > 0">
          <a-menu slot="overlay">
            <a-menu-item>
              <a-popconfirm
                title="确定删除吗?"
                @confirm="() => handleDelete()"
                v-wx-role="6030604"
              >
                <a><a-icon type="delete" />删除</a>
              </a-popconfirm>
            </a-menu-item>
          </a-menu>
          <a-button style="margin-left: 8px"
            >批量操作<a-icon type="down"
          /></a-button>
        </a-dropdown>
      </div>
      <s-table
        ref="table"
        rowKey="id"
        size="middle"
        :scroll="{ x: 1500 }"
        :columns="columns"
        :alert="options.alert"
        :row-selection="options.rowSelection"
        :data="loadData"
      >
        <template slot="contractName" slot-scope="text, record">
          <a @click="handelView(record)">{{
            text == null || text == '' ? '--' : text
          }}</a>
        </template>

        <template slot="action" slot-scope="text, record">
          <a @click="handleEdit(record)" v-wx-role="6030602"> <a-icon />编辑</a>
          <a-popconfirm
            title="确定删除吗?"
            @confirm="() => handleDelete(record.id)"
            v-wx-role="6030603"
          >
            <a>删除</a>
          </a-popconfirm>
          <a-dropdown>
            <a class="ant-dropdown-link">
              更多
              <a-icon type="down" />
            </a>
            <a-menu slot="overlay">
              <a-menu-item>
                <a @click="handleCollaborationView(record)" v-wx-role="6030602">
                  <a-icon />协同链接</a
                >
              </a-menu-item>
            </a-menu>
          </a-dropdown>
        </template>
      </s-table>

      <dev-contract-edit
        ref="modalEdit"
        @ok="modalEditOk"
        @close="collaborationViewClose"
      ></dev-contract-edit>
      <dev-contract-view ref="modalView"></dev-contract-view>
      <dev-contract-collaboration-view
        ref="collaborationViewRef"
        @close="collaborationViewClose"
      ></dev-contract-collaboration-view>
    </div>
  </div>
</template>

<script>
import { STable, Ellipsis } from '@/components'
import { deleteAction, postAction, fileAction, getAction } from '@/api/manage'
import { mixin } from '@/utils/mixin'
import DevContractEdit from './DevContractEdit'
import DevContractView from './DevContractView'
import DevContractCollaborationView from '../DevContractCollaborationView.vue'

export default {
  name: 'DevContractList',
  mixins: [mixin],
  components: {
    STable,
    Ellipsis,
    DevContractEdit,
    DevContractView,
    DevContractCollaborationView,
  },
  data() {
    return {
      toggleSearchStatus: false,
      activeKey: '0',
      visible: false,
      // 查询条件
      queryParam: {
        keywords: undefined,
        contractProcurementMethodId: undefined,
        contractType: undefined,
        salespersonName: undefined,
        contractClassification: undefined,
        isSave: undefined,
      },
      // 表头
      // 如果需要字典，那么需要在columns列中加入 customRender: (text) => this.$sysDictFilter(text, 'xxxx')xxxx 为dataIndex
      columns: [
        {
          title: '合同名称',
          dataIndex: 'contractName',
          scopedSlots: { customRender: 'contractName' },
        },
        {
          title: '合同编号',
          dataIndex: 'contractNumber',
        },
        {
          title: '合同类型',
          dataIndex: 'contractType',
          customRender: (text) => this.$sysDictFilter(text, 'contractType'),
        },
        {
          title: '采购方式',
          dataIndex: 'contractProcurementMethodId',
          customRender: (text) =>
            this.$sysDictFilter(text, 'contractProcurementMethod'),
        },

        {
          title: '合同总金额',
          dataIndex: 'contractAmount',
        },
        {
          title: '供应商',
          dataIndex: 'institutionName',
        },
        {
          title: '签约日期',
          dataIndex: 'signingDate',
        },
        {
          title: '销售人员',
          dataIndex: 'salespersonName',
        },
        {
          title: '创建人',
          dataIndex: 'companyName',
          scopedSlots: { customRender: 'companyName' },
        },
        {
          title: '创建时间',
          dataIndex: 'createTime',
        },
        //
        {
          title: '操作',
          dataIndex: 'action',
          align: 'center',
          fixed: 'right',
          scopedSlots: { customRender: 'action' },
        },
      ],
      // 加载数据方法 必须为 Promise 对象
      loadData: (parameter) => {
        console.log('loadData.parameter', parameter)
        this.queryParam.contractClassification = this.contractClassification
        return postAction(
          this.url.list,
          Object.assign(parameter, this.queryParam)
        ).then((res) => {
          return res.result
        })
      },
      selectedRowKeys: [],
      options: {
        alert: {
          clear: () => {
            this.selectedRowKeys = []
          },
        },
        rowSelection: {
          selectedRowKeys: this.selectedRowKeys,
          onChange: this.onSelectChange,
          type: 'checkbox',
        },
      },
      contractClassification: '2',
      url: {
        list: '/system/devContract/listOtherContractPage',
        delete: '/system/devContract/delete',
        getContractNumber: '/system/devContract/getContractNumber',
      },
      tabContractName: '全部合同',
      tabDraftContractName: '草稿合同',
    }
  },
  created() {
    this.getContractNumber()
  },
  computed: {},
  methods: {
    handleToggleSearch() {
      this.toggleSearchStatus = !this.toggleSearchStatus
    },
    //重置
    reset() {
      var isSave = this.queryParam.isSave
      this.$objToReset(this.queryParam)
      this.queryParam.isSave = isSave
      this.$refs.table.refresh(true)
    },
    xttjShow() {
      this.$refs.collaborationViewRef.xttjShow(this.contractClassification)
    },
    //合同数量统计
    getContractNumber() {
      getAction(this.url.getContractNumber, {
        contractClassification: this.contractClassification,
      }).then((res) => {
        this.$nextTick(() => {
          this.tabContractName =
            '全部合同(' + res.result.data.allContractNum + ')'
          this.tabDraftContractName =
            '草稿合同(' + res.result.data.draftContractNum + ')'
        })
      })
    },
    handleTabClick(key) {
      this.queryParam.isSave = key
      this.$refs.table.refresh(true)
      this.getContractNumber()
      console.log('Selected Tab Key:', key) // 在这里处理 key 的逻辑
      // 在此处执行自定义逻辑，例如更新状态或发送请求
    },
    exportExcel() {
      // if (this.queryParam.wjinfo) {
      //   fileAction(this.url.listExcel, Object.assign(this.queryParam)).then(
      //     (res) => {
      //       console.log(this.data1)
      //     }
      //   )
      // } else {
      //   this.$message.success('请至少选择一个问卷!')
      // }
    },
    collaborationViewClose() {
      this.$refs.table.refresh(true)
      this.getContractNumber()
    },
    onChange(value, dateString) {
      this.queryParam.signingDateList = dateString
    },
    // 删除
    handleDelete(record) {
      if (!record) {
        // 如果没有传入，那么批量删除
        record = this.selectedRowKeys.join(',')
      }
      deleteAction(this.url.delete, { ids: record }).then((resp) => {
        this.$message.success('删除成功!')
        this.$refs.table.refresh(true)
      })
    },
    //安装验收
    handleInstallationAcceptance() {
      this.$message.success('正在开发中......')
    },
    //协同页面
    handleCollaborationView(record) {
      this.$refs.collaborationViewRef.show(record)
    },
    // 用户编辑
    handleEdit(record) {
      this.$refs.modalEdit.editDrawer(record)
    },
    searchQuery() {
      this.$refs.table.refresh(true)
    },
    // 保存刷新
    modalEditOk() {
      this.$refs.table.refresh()
    },
    // 查看
    handelView(record) {
      this.$refs.modalView.editDrawer(record)
    },
    //开启选择
    onSelectChange(selectedRowKeys) {
      console.log('selectedRowKeys changed: ', selectedRowKeys)
      this.selectedRowKeys = selectedRowKeys
    },
  },
  watch: {},
}
</script>
<style>
.card-container {
  background: #f5f5f5;
  overflow: hidden;
  padding: 0px 10px;
}
.card-container > .ant-tabs-card > .ant-tabs-content {
  margin-top: -16px;
}

/* .card-container > .ant-tabs-card > .ant-tabs-content > .ant-tabs-tabpane {
  background: #fff;
  padding: 16px;
} */
.table-page-search-wrapper {
  background: #fff;
  padding: 16px;
}
.card-container > .ant-tabs-card > .ant-tabs-bar {
  border-color: #f5f5f5;
}

.card-container > .ant-tabs-card > .ant-tabs-bar .ant-tabs-tab {
  border-color: transparent;
  background: transparent;
}

.card-container > .ant-tabs-card > .ant-tabs-bar .ant-tabs-tab-active {
  border-color: #fff;
  background: #fff;
}
</style>
